<template>
	<div class='videoBox'>
		<div class='backgroundC'></div>
		<comp-head style='width:80%;margin:auto;'></comp-head>
		<!-- 播放器 -->
		<div id="video">
			<!-- ui层控制器 -->
			<div class="header">
				<div class="title"> 潮留美海自制播放器 </div>
			</div>

			<!-- 播放本体 -->
			<div class="content cp">
				<!-- 加载画面 -->
				<div id="jzhm" class="fill">
					<img class="fill" :src="require('./img/1.jpg')" />
				</div>
				<!-- 银幕 -->
				<div id="videoContent" class="fill">

				</div>
				<!-- 弹幕 -->
				<div class="DM">
					
				</div>
				<!-- 暂停播放显示状态 -->
				<div class="zhuangtai">
					<img class="fill" :src="require('./img/bf.png')" />
				</div>
			</div>

			<!-- footer -->
			<div class="footer">
				<!-- 进度条 -->
				<div class="progressbar">

					<div class="bar"></div>

				</div>
				<!-- 下方控制盘 -->
				<div class="opt">
					<!-- 暂停播放列表 -->
					<div class="bfOrZt cp">
						<img :src="require('./img/bf.png')" />
					</div>
					<!-- 时间 -->
					<div class="time cp">
						<span class="currentTime">00:00</span>
						<span> / </span>
						<span class="countTime">00:00</span>
					</div>

					<!-- 全屏 -->
					<div class="qp fR cp">
						<img :src='require("./img/qp.png")' />
					</div>

					<!-- 音量 -->
					<div class="yl fR cp">
						<img :src='require("./img/yl.png")' />
						<input class='yl_range' type='range' min="0" max="100" />
					</div>
				</div>
			</div>
		</div>

		<el-button type="text" v-if='video.isCheck == 0' class='checkBtn' @click="open">审核通过</el-button>
		<div class='check'>
			<!-- 分享按钮 -->
			<div class='share' @click='shareQQ'>
				<img class='img1' :src='require("@/assets/images/check/share_1.png")' />
				<img class='img2' :src='require("@/assets/images/check/share_2.png")' />
				<span> 0 </span>
			</div>
			<!-- 点赞按钮 -->
			<div class='share' :class='{active:isCheck}' @click='dianVideo'>
				<img class='img1' :src='require("@/assets/images/check/check_1.png")' />
				<img class='img2' :src='require("@/assets/images/check/check_2.png")' />
				<span> {{ video.praise || 0 }} </span>
			</div>
			<!-- 收藏按钮 -->
			<div class='share' :class='{active:isCollect}' @click='collectVideo'>
				<img class='img1' :src='require("@/assets/images/check/collect_1.png")' />
				<img class='img2' :src='require("@/assets/images/check/collect_2.png")' />
				<span> {{ video.collect || 0 }} </span>
			</div>
		</div>

		<comp-videos ref='videos' v-if='video.isCheck == 1' :topic='video.topic'></comp-videos>

		<input-box :video_id='video_id' v-if='video.isCheck == 1' ref='comment' class='inputSymbol'></input-box>
	</div>
</template>

<script>
import { localhost, videoPath ,videoImagePath } from '@/api/config.js'
import { getVideoById , checkVideo , dianVideo , getUserDianVideo , collectVideo , getUserCollectVideo } from '@/api/index.js'
import video from "./js/video.js"
import inputBox from "@/components/base/comment/comment"
import compHead from '../head/head'
import compVideos from './comp/videos'
import { mapGetters } from 'vuex'
export default {
	components: {
		inputBox,
		compHead,
		compVideos
	},
	computed: {
		...mapGetters(["user"]) 
	},
	data (){
		return {
			video: {},
			video_id: 0,
			isCheck: false,
			isCollect: false
		}
	},
	mounted (){
		this.video_id = this.$route.params.id*1;
		this.getData();
		// this.getVideoComment();
		// 叫评论加载
		// this.$refs.comment.getVideoComment(this.video_id);
	},
	methods:{
		getData (){
			var id = this.$route.params.id;
			getVideoById(id).then((res)=>{
				if( res.data && res.data.code == 200 ){
					this.video = res.data.data[0];
					var path = localhost + videoPath + res.data.data[0].path;
					this.v = new video(path, document.getElementById("videoContent"));
					setTimeout(()=>{
						// 显示关联
						this.$refs.videos.getVideoListByTopic(this.video.topic);	
						this.$refs.videos.videoId = id;
					},500)
				}else{
					this.$message({ type: "warning" , message: "这个视频还未审核,请通知站长或管理审核!" })
					this.$router.push("/");
				}
			})

			// 获取当前用户是否点赞了这个视频
			getUserDianVideo({ video: id }).then((res)=>{
				if( res.data.data.isCheck ){
					this.isCheck = true;
				}else{
					this.isCheck = false;
				}
			})

			// 获取当前用户是否关注过这个视频
			getUserCollectVideo({ video: id }).then((res)=>{
				if( res.data.data.isCollect ){
					this.isCollect = true;
				}else{
					this.isCollect = false;
				}
			})

		},

		open (){
			var id = this.$route.params.id
			this.$confirm('是否通过该视频的审核, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				checkVideo(id).then((res)=>{
					if( res.status == 200 ){
						this.$message({type: "success", message: "审核通过"});
						location.reload();
					}
				})
			}).catch(() => {
				
			});
		},

		// 点赞按钮
		dianVideo (){
			var id = this.$route.params.id
			dianVideo({
				video: id
			}).then((res)=>{
				if( res.data.code == "200" ){
					this.$message({
						type: "success",
						message: "点赞成功"
					})
					this.video.praise += 1;
					this.isCheck = true;
				}else {
					this.$message({
						type: "warning",
						message: res.data.msg
					})
				}
			})
		},

		collectVideo (){
			var id = this.$route.params.id
			collectVideo({
				video: id
			}).then((res)=>{
				if( res.data.code == "200" ){
					this.$message({
						type: "success",
						message: "收藏成功"
					})
					this.video.collect += 1;
					this.isCollect = true;
				}else {
					this.$message({
						type: "warning",
						message: res.data.msg
					})
				}
			})
		},

		shareQQ (){
			var url = location.href;
			var title = this.video.name;
			var images = localhost+videoImagePath+this.video.image;
			var url = `https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&desc=&summary=asdasdasd&site=Finally&pics=${images}`
			open(url)
		}

	}
}
</script>

<style scoped>
	.backgroundC {
        background-image: url(~@/assets/images/bg1.jpg) !important;
        /* background-image: url(~@/assets/images/bg.jpg) !important; */
        position: fixed;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        z-index: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        opacity: 0.85;
    }

	.videoBox {
		height: 100%;
	}

	#video { 
		/* width: 80%; height: 80%; 
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		background: #000000; */

		width: 80%;
		height: calc(100% - 190px);
		position: relative;
		background: #000000;
		margin: 45px 10%;
	}
	#video .header {
		height: 50px;
		background: #000;
		opacity : .7;
		position:relative;
	}

	#video .content {
		height: calc(100% - 100px);
		background: #0c1618;
		opacity: .7;
		position:relative;
	}

	#video .footer {
		height: 50px;
		background: #0c1618;
		opacity: .7;
	}

	.progressbar {
		width: 100%;
		margin: auto;
		height: 5px;
		background: #656262;
		border-radius : 8px;
	}

	.bar {
		width: 0%;
		height: 100%;
		background: #fff;
		border-radius: 8px;
	}

	.opt > * {
		float: left;
		margin: 0px 5px;
	}

	.opt {
		overflow: hidden;
		color: #fff;
		line-height: 45px;
		padding: 0px 19px;
	}

	.bfOrZt{ 
		width: 20px;
		height: 20px; 
	}

	.footer img {
		width: 20px;
		height: 20px;
		margin-top: 12px;
	}

	.time {
		margin-left: 20px;
		font-size: 12px;
	}

	.fR { float: right; }

	.title {
		color: #fff;
		font-size: 15px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		white-space: nowrap;
	}

	.fill { width: 100%; height: 100%; }
	.fill > * {

	}
	

	.content > div { position: absolute; }

	.zhuangtai {
		width: 50px;
		height: 50px;
		position: absolute;
		right: 20px;
		bottom: 20px;
		border: solid 1px #a1a1a1;
		border-radius: 50%;
		padding: 10px 10px 10px 15px;
		display: none;
	}
	
	.cp { cursor: pointer; }

	video { width : 100%;height:100%; }

	input[type="range"] {
		/*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
		-webkit-appearance: none; /*去除默认样式*/
		background-color: #ebeff4;
		/*border-radius: 15px;*/
		width: 80% !important;
		-webkit-appearance: none;
		height:4px;
		padding: 0;
		border: none;
		position: absolute;
		top: 18px;
		/*input的长度为80%，margin-left的长度为10%*/
	}
	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;/*去除默认样式*/
		cursor: default;
		top: 0;
		height: 20px;
		width: 20px;
		transform: translateY(0px);
		/*background: none repeat scroll 0 0 #5891f5;*/
		background: #fff;
		border-radius: 15px;
		border: 5px solid #006eb3;
		/*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
	}
	
	.yl_range { display: none;margin-left: 30px; }
	.yl {
		transition: width 0.3s;
		position: relative;
		width : 20px;
	}
	.yl:hover {
		width: 200px;
	}
	.yl:hover > .yl_range { display : block; }

	.inputSymbol {
		z-index: 99;
		position: relative;
		width: 80%;
		margin:auto;
		background: #ffffffc2;
    	padding: 20px;
		box-sizing: border-box;
	}

	.checkBtn {
		position: absolute;
		background: #0088fd;
		color: #fff;
		padding: 12px;
		bottom: 0;
		width: 100%;
	}
	.check {
		/* position: absolute;
		right: 0px;
		top: 3px; */
		position: relative;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		background: #fff;
		border-radius: 4px;
		/* padding: 4px 12px; */
		width: 80%;
    	margin: auto;
		height: 50px;
    	margin-bottom: 12px;
		color: #cacaca;
		font-size: 12px;
	}

	.check > * {
		display: flex;
		align-items: center;
		padding: 0px 12px;
		cursor: pointer;
	}

	.check > * > img {
		/* display: none; */
		width: 20px;
	}

	.check > *:hover {
		color:#0088fd;
	}

	.check > *.active {
		color:#0088fd;
	}

	.check > *.active > .img1, .check > *:hover > .img1 {
		display: none;
	}

	.check > *.active > .img2, .check > *:hover > .img2 {
		display: block;
	}

	.check > * > .img2 {
		display: none;
	}

</style>